<template>
  <div class="home">
    <div class="headbody">
      <!-- 左侧头像部分 -->
      <div class="lefthead">
        <div class="avatar">
          <el-avatar
            :size="150"
            :src="this.$store.state.userheaderimg"
          ></el-avatar>
        </div>
        <div class="nicknameutype">
          <strong class="nicknameclass">
            {{ this.$store.state.kgcUser.nickname }}
          </strong>

          <i class="usertype">{{ getUserType }}</i>
        </div>
        <div style="font-size:14px">UID: {{ this.$store.state.uid }}</div>
      </div>
      <div class="gradient"></div>
      <!-- 右侧说明部分 -->
      <div class="righthead">
        <!-- 详情部分 -->
        <div class="xiangqing">
          <div class="jingyan">
            <router-link to="/point">
              <i class="level">LV{{ userdata.level_id }}</i>
              <el-progress
                :show-text="false"
                :percentage="getPercentage"
                color="#e6a23c"
              ></el-progress>
              <i style="font-size:14px"
                >{{ userdata.cur_score }}/{{ maxval }}</i
              >
            </router-link>
          </div>
          <div class="gexing">
            {{ this.$store.state.kgcUser.signname }}
          </div>
          <div class="calc">
            <span>关注 {{ userdata.follow_count }}</span>
            <span>粉丝 {{ userdata.fans_count }}</span>
            <span>被赞 {{ userdata.support_count }}</span>
            <span>帖子 {{ userdata.invitation_count }}</span>
          </div>
        </div>
        <!-- 签到 -->
        <div class="sign">
          <div class="clanderSign">
            <SignClander></SignClander>
          </div>
        </div>
      </div>
    </div>
    <div class="bodycontent">
      <div id="leftmenulist">
        <ul id="menulist">
          <li><router-link to="1">就业</router-link></li>
          <li><router-link to="1">课程</router-link></li>
          <li><router-link to="1">动态</router-link></li>
          <li><router-link to="1">题库</router-link></li>
          <li><router-link to="1">社区</router-link></li>
          <li><router-link to="1">任务</router-link></li>
          <li>
            <router-link to="/home/money">
              <i class="el-icon-coin"></i> 钱包</router-link
            >
          </li>
          <li>
            <router-link to="/home/setting">
              <i class="el-icon-setting"></i> 设置</router-link
            >
          </li>
        </ul>
      </div>

      <div class="bodyright">
        <router-view> </router-view>
      </div>
    </div>
  </div>
</template>

<script>
import SignClander from './SignClander.vue'
export default {
  components: {
    SignClander
  },
  data() {
    return {
      kgcUser: {},
      userdata: {},
      maxval: 0
    }
  },
  methods: {},
  async created() {
    await this.$store.dispatch('initUser', this.$store.state.uid)
    this.kgcUser = this.$store.state.kgcUser
    await this.$store.dispatch('getUserData', this.$store.state.uid)
    this.userdata = this.$store.state.userdata
    const { data: res } = await this.$http.post('getMaxLevelScore.calc', {
      id: this.userdata.level_id
    })
    this.maxval = res.data
  },
  computed: {
    getUserType() {
      if (this.kgcUser.usertype === 1) {
        return '学员'
      } else if (this.kgcUser.usertype === 2) {
        return '教员'
      }
    },
    getPercentage() {
      const num = parseInt((this.userdata.cur_score / this.maxval) * 100)
      if (!num) return 0
      return num
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  border-radius: 50%;
  border: 4.5px solid #4f5b69;
  height: 150px;
}

.nicknameclass {
  display: block;
  position: relative;
  left: 20px;
  font-size: 20px;
  font-weight: 400;
}

.nicknameutype {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 5px 0 0 0 !important;
  flex-wrap: wrap;
}

.usertype {
  font-style: normal;
  background: #09f;
  font-size: 12px;
  height: 16px;
  border-radius: 16px;
  padding: 2px 6px;
  position: relative;
  left: 26px;
  top:4px;
}
.headbody {
  height: 280px;
  background: url('../../../assets/myHome_01.jpg') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.lefthead {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  width: 12%;
  align-items: flex-end;
  justify-content: center;
  div {
    margin-top: 12px;
    margin-right: 8%;
  }
}

.gexing {
  font-size: 16px;
  margin-bottom: 16px;
}

.jingyan {
  i {
    font-size: 12px;
    padding: 4px;
    color: #ffffff;
    font-style: normal;
  }
  .level {
    border-radius: 6px;
    background: #f69a00;
  }
  margin-bottom: 16px;
}

.gradient {
  background: -webkit-radial-gradient(#6c7681 10%, #031429 90%);
  width: 1px;
}

.righthead {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;

  z-index: 4;
}

.xiangqing {
  width: 35%;
  color: #ffffff;
  margin-left: 20px;
}

.sign {
  width: 65%;
  display: flex;
  justify-content: flex-end;
}

.calc {
  font-size: 14px;
  span {
    padding-right: 14px;
  }
}

.el-progress {
  width: 50%;
  display: inline-block;
  margin-left: 5px;
}

#leftmenulist {
  font-size: 14px;
  width: 12%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  height: 352px;
}

#menulist {
  width: 210px;
  border: 1px solid #e6e6e6;
  background: #ffffff;
  transform: translateX(-10%);
}

#menulist,
#menulist li {
  list-style: none; /* 将默认的列表符号去掉 */
  padding: 0; /* 将默认的内边距去掉 */
  margin: 0; /* 将默认的外边距去掉 */
  text-align: center;
  a:hover {
    background: #009966;
    color: #ffffff;
  }
}

.anewclass {
  background: #009966;
  color: #ffffff !important;
}

#menulist li a {
  color: #5a5a5a;
  display: block;
  width: 100%;
  height: 43px;
  line-height: 43px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
}

.bodycontent {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.bodyright {
  width: 50%;
  width: 910px;
  min-height: 640px;
  border: 1px solid #e6e6e6;
  background: #ffffff;
  position: relative;
  left: 10px;
}

.router-link-active {
  background: #009966;
  color: #ffffff !important;
}
</style>
